import VueDatepickerLocal from "vue-datepicker-local";

/**
 * 载入项目引导文件
 */
require('./bootstrap');

window.Vue = require('vue');

const app = new Vue({
    el: '#wrapper',
    data:{
        table:null,
        searchParams:{
            keyword:'',
        },
        qrcode_type_list:page_params.data_typelist,
        emptyQrcodeData:{
            'type':'QR_CARD',
            'title':'',
            'card_info':{
                'expire_type':'default',//过期类别，默认(default)为365天，指定秒数(seconds)范围是60~1800秒
                'expire_seconds':60,
                'card_id':'',
                'code':'',
                'openid':'',
                'is_unique_code':0,
                'outer_str':'',
            },
            'card_list':[
                {'card_id':'','code':'','outer_str':'',}
            ],
            'qrcode_info':{},
        },
        qrcodeData:{'type':'','card_info':{},'card_list':[],'qrcode_info':{}},
        box:null,
    },
    watch:{
        qrcodeData:function (val) {
            //console.log(val);
        }
    },
    mounted:function(){
        let tableOptions = utils.bootstraptableOptions;
        //请求后台的URL
        tableOptions.url = page_params.url_list;
        //搜索参数
        tableOptions.queryParams = (params) => {//传递参数（*）
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {
                pageSize:params.pageSize,
                page:params.pageNumber,
            };
            return _.merge(temp, this.searchParams);
        };
        tableOptions.columns = [
            {field: 'id',title: '序号'},
            {field: 'type_str',title: '类型',},
            {field: 'title',title: '名称'},
            {field: 'status_str',title: '状态'},
            /*{
                field: 'qrcode_info_url',title: '二维码解析后地址',
                formatter: (value, row, index) => {
                    return row.qrcode_info.url;
                },
            },*/
            {
                field: 'operate',
                title: '操作',
                formatter: (value, row, index) => {
                    let buttons = [];
                    if (row.status_is == 0 && page_params.url_edit){
                        buttons.push('<button class="btn btn-primary btn-sm btn-edit"><i class="fa fa-pencil"></i> 编辑</button>');
                    }
                    if (row.status_is == 0 && page_params.url_publish){
                        buttons.push('<button class="btn btn-primary btn-sm btn-publish"><i class="fa fa-cloud-upload"></i> 生成</button>');
                    }
                    if (row.status_is == 0 && page_params.url_del){
                        buttons.push('<button class="btn btn-warning btn-sm btn-del"><i class="fa fa-trash"></i> 删除</button>');
                    }
                    if (row.status_is != 0){
                        buttons.push('<button class="btn btn-primary btn-sm btn-check"><i class="fa fa-eye"></i> 查看</button>');
                    }
                    return buttons.join("\r\n");
                },//自定义方法，添加操作按钮
                events : {
                    'click .btn-edit' : (e, value, row, index) => {
                        this.qrcodeData = row;
                        this.box = layer.open({
                            type: 1,
                            title: '修改投放二维码',
                            anim: 2,
                            shadeClose: true, //开启遮罩关闭
                            skin: 'layui-layer-molv', //加上边框
                            area: ['650px', '500px'], //宽高
                            content: $('#box-qrcode')
                        });
                    },
                    'click .btn-del' : (e, value, row, index) => {
                        utils.confirm(page_params.url_del,{'id':row.id}, (response, data) =>{
                            data = response.data;
                            utils.showToastr(data);
                            if (data.status == 'success') {
                                this.query();
                            }
                        });
                    },
                    'click .btn-publish' : (e, value, row, index) => {
                        utils.confirm(page_params.url_publish,{'id':row.id}, (response, data) =>{
                            data = response.data;
                            utils.showToastr(data);
                            if (data.status == 'success') {
                                this.query();
                            }
                        },'你确定生成该二维码么？','生成二维码后将不可编辑、删除');
                    },
                    'click .btn-check' : (e, value, row, index) => {
                        this.qrcodeData = row;
                        this.box = layer.open({
                            type: 1,
                            title: '查看二维码',
                            anim: 2,
                            shadeClose: true, //开启遮罩关闭
                            skin: 'layui-layer-molv', //加上边框
                            area: ['500px', '520px'], //宽高
                            content: $('#box-qrcode-check')
                        });
                    },
                }
            },
        ];
        this.table = $("#table").bootstrapTable(tableOptions);
    },
    methods: {
        query: function () {
            this.table.bootstrapTable('refresh');
        },
        addQrcode:function () {
            this.qrcodeData.card_list.push(_.cloneDeep(this.emptyQrcodeData))
        },
        delQrcode:function (index){
            layer.confirm('你确定删除该卡券么？', {icon: 3, title: '删除提示',shadeClose: true,}, (boxIndex) => {
                this.qrcodeData.card_list.splice(index, 1);
                layer.close(boxIndex);
            });
        },
        add:function () {//打开白名单
            this.qrcodeData = _.cloneDeep(this.emptyQrcodeData);
            this.box = layer.open({
                type: 1,
                title: '添加投放二维码',
                anim: 2,
                shadeClose: true, //开启遮罩关闭
                skin: 'layui-layer-molv', //加上边框
                area: ['650px', '500px'], //宽高
                content: $('#box-qrcode')
            });
        },
        save:function () {//保存白名单
            let url_save = this.qrcodeData.id ? page_params.url_edit : page_params.url_add;
            utils.ajaxPost(url_save, this.qrcodeData, (response, params) => {
                if (response.data.status == 'success'){
                    layer.close(this.box);
                    this.query();
                }
                utils.showToastr(response.data);
            });
        }
    },
    components: {

    },
});